<div
  class="mx-auto grid w-full max-w-3xl grid-cols-2 gap-4 text-xs text-slate-600 dark:text-slate-300 sm:grid-cols-3 sm:gap-2 sm:text-sm md:grid-cols-4 md:text-base"
>
  <button
    class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
  >
    Article Writing<span class="p-1 opacity-60 sm:p-2">21</span>
  </button>
  <button
    class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
  >
    Code Debugging<span class="p-1 opacity-60 sm:p-2">14</span>
  </button>
  <button
    class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
  >
    Grammar<span class="p-1 opacity-60 sm:p-2">4</span>
  </button>
  <button
    class="rounded-lg bg-slate-200 p-2 hover:bg-blue-600 hover:text-slate-200 dark:bg-slate-800 dark:hover:bg-blue-600 dark:hover:text-slate-50"
  >
    Twitter threads<span class="p-1 opacity-60 sm:p-2">12</span>
  </button>
</div>
